<template>
	<view>
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="我的技能"></u-icon>
		</navigator>
		<view class="content">
			<view class="info flex-col ">
				<view class="title">
					拥有技能
				</view>
				<u-checkbox-group  placement="row" @change="checkboxChange"
					inactiveColor="#999CA3" activeColor="#3377FF">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.id" :checked="item.disabled" >
					</u-checkbox>
				</u-checkbox-group>
			</view>

		</view>
		<image src="@/static/logo.png" mode="widthFix" class="botbg">
		</image>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				sH: '',
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [],
				zt: []
			};
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.list()
		},

		methods: {
			list() {
				this.$api.rider_index({

				}).then(res => {
					this.zt = res.data.skill_ids.split(',').map(Number)
					console.log('this.zt', this.zt);
					this.skill_list()
				}).catch(err => {});
			},
			skill_list() {
				this.$api.skill_list({}).then(res => {

					this.checkboxList1 = res.data.map(item => {
					    return {
					        id: item.id,
					        name: item.name,
					        disabled: this.zt.includes(item.id)
					    };
					});

					console.log('更新后的 this.checkboxList1', this.checkboxList1);



				}).catch(error => {});


			},
			checkboxChange(n) {
				console.log('change', n);
				var skill_ids = n.join(',');
				this.$api.rider_skill({
					skill_ids
				}).then(res => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 115rpx;

		.info {
			height: 252rpx;
			margin: 35px auto;
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.title {
				margin: 32rpx 0 0 24rpx;
				font-size: 28rpx;
				color: #333A47;
			}
		}
	}

	.botbg {
		position: absolute;
		bottom: 50rpx;
		width: 750rpx;
	}

	.u-checkbox-group {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}

	.u-checkbox-label--left {
		margin: 20rpx !important;
	}
</style>